<template>
  <div
    class="container"
    v-loading="loading"
    element-loading-text="加载中。。。"
  >
    <HeadBar />
    <div class="flex-wrapper">
      <Sidebar ref="sideBarRef" @child-event="handleChildEvent" />
      <div class="content_items">
        <div class="content_head">
          <div>
            <div class="content_head_1">Diamond Aircraft</div>
            <div class="content_head_2">DA42 NG</div>
            <div @click="showRevision" class="content_head_3">
              Library Revision Information
            </div>
          </div>
          <img
            style="height: 8vh; margin-right: 2vw"
            src="../../assets/diamond.png"
          />
        </div>
        <Content v-if="showContent" ref="childRef" />
        <Welcome v-else />
      </div>
    </div>
    <Buttom />
  </div>
</template>

<script setup>
import HeadBar from "@/components/HeadBar/index.vue";
import Sidebar from "@/components/Sidebar/index.vue";
import Content from "@/components/Content/index.vue";
import Buttom from "@/components/Buttom/index.vue";
import Welcome from "@/components/Content/welcome.vue";
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import store from "@/store/index.js";

const childRef = ref(null);

const sideBarRef = ref(null);

const loading = ref(false);

const showContent = ref(false);

const handleChildEvent = async (params) => {
  if (params == "1-1") {
    //把选中的手册记录到vuex中，将来还要回显的
    showContent.value = true;
  } else {
    ElMessage.error("该手册还在开发中！");
    showContent.value = false;
  }
};

const showRevision = async () => {
  showContent.value = true;
};

onBeforeMount(() => {
  //从vuex中获取数据
  if (store.getters.getChapter != "") {
    showContent.value = true;
  }
});

// 父组件逻辑或者事件处理等
</script>

<style scoped>
.flex-wrapper {
  display: flex; /* 使用 Flexbox 布局 */
  /* 可以根据需要设置其他样式 */
  padding: 0px;
}

.content_items {
  width: 100%;
}

.content_head {
  display: flex;
  justify-content: space-between;
  height: 10vh;
  width: 100%;
  background-color: rgb(239, 244, 247);
  align-items: center;
}

.content_head_1 {
  font-size: 2.8vh;
  margin-left: 2vw;
  font-family: Arial, Helvetica, sans-serif;
  cursor: context-menu;
}

.content_head_2 {
  margin-left: 2vw;
  margin-top: 1vh;
  font-size: 2vh;
  font-family: Arial, Helvetica, sans-serif;
}

.content_head_3 {
  margin-left: 2vw;
  margin-top: 1vh;
  color: rgb(47, 61, 184);
  font-size: 2vh;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}
</style>
